import '../styles/appleItem.scss'
import { useRootStore } from '../stores/RootStore'
import { observer } from 'mobx-react-lite'
import appleImage from '../images/apple.png'

function AppleItem({ apple }) {
    const { appleBasketStore } = useRootStore()
    const { eatApple } = appleBasketStore

    return (
        <div className="appleItem">
            <div className="apple"><img src={appleImage} alt=""/></div>
            <div className="info">
                <div className="name">红苹果 - { apple.id }号</div>
                <div className="weight">{ apple.weight }克</div>
            </div>
            <div className="btn-div">
                <button onClick={() => eatApple(apple.id)}> 吃掉 </button>
            </div>
        </div>
    )
}

export default observer(AppleItem)
